קונפיגורציית Tailwind CSS: טכניקות הגדרה מתקדמות לפיתוח גלובלי

            // tailwind.config.js

module.exports = {
  theme: {
    extend: {
      colors: {
        'primary': '#3490dc',
        'secondary': '#6574cd',
        'accent': '#9561e2',
        'neutral-gray-100': '#f7fafc',
        'neutral-gray-800': '#2d3748',
        // Example for a right-to-left friendly color
        'rtl-accent': '#e53e3e', 
      },
    },
  },
  // ... other configurations
}

            

              
                Copy
              
            
          

            // tailwind.config.js

module.exports = {
  theme: {
    extend: {
      spacing: {
        '7': '1.75rem', // 28px
        '8': '2rem',    // 32px
        '9': '2.25rem', // 36px
        '10': '2.5rem', // 40px
        '16': '4rem',   // 64px
        '20': '5rem',   // 80px
        '24': '6rem',   // 96px
        '28': '7rem',   // 112px
        '32': '8rem',   // 128px
        '64': '16rem',  // 256px
        '96': '24rem',  // 384px
        '128': '32rem', // 512px
      },
      maxWidth: {
        'custom-xl': '80rem', // 1280px
      }
    },
  },
  // ... other configurations
}

            

              
                Copy
              
            
          

            // tailwind.config.js

module.exports = {
  theme: {
    extend: {
      fontFamily: {
        'sans-serif': ['Inter', 'ui-sans-serif', 'system-ui', '-apple-system', 'BlinkMacSystemFont', 'Oxygen-Sans', 'Ubuntu', 'Cantarell', 'Helvetica Neue', 'sans-serif'],
        'serif': ['Merriweather', 'Georgia', 'Times New Roman', 'Times', 'serif'],
        'mono': ['Fira Code', 'Consolas', 'Monaco', 'Andale Mono', 'Ubuntu Mono', 'monospace'],
        // A font that supports a wide range of characters
        'global-text': ['Noto Sans', 'sans-serif'], 
      },
      fontSize: {
        'xs': '0.75rem', // 12px
        'sm': '0.875rem', // 14px
        'base': '1rem',   // 16px
        'lg': '1.125rem', // 18px
        'xl': '1.25rem',  // 20px
        '2xl': '1.5rem',  // 24px
        '3xl': '1.875rem',// 30px
        '4xl': '2.25rem', // 36px
        '5xl': '3rem',    // 48px
        '6xl': '3.75rem', // 60px
        '7xl': '4.5rem',  // 72px
        '8xl': '6rem',    // 96px
        '9xl': '8rem',    // 128px
      },
      lineHeight: {
        'tight': '1.25', 
        'snug': '1.375', 
        'normal': '1.5', 
        'relaxed': '1.625', 
        'loose': '2',
        'global-line': '1.7',
      }
    },
  },
  // ... other configurations
}

            

              
                Copy
              
            
          

            // tailwind.config.js

module.exports = {
  theme: {
    screens: {
      'sm': '640px',     // Standard small screens
      'md': '768px',     // Standard medium screens
      'lg': '1024px',    // Standard large screens
      'xl': '1280px',    // Standard extra-large screens
      '2xl': '1536px',   // Standard 2x extra-large screens
      // Custom breakpoint for specific markets or devices
      'custom-mobile': '480px',
      'high-density': {'min': '1920px', 'max': '2560px'},
    },
    extend: {
      // ... other theme extensions
    }
  },
  // ... other configurations
}

            

              
                Copy
              
            
          

            // tailwind.config.js

module.exports = {
  // ... theme configuration
  corePlugins: {
    // Disable plugins you won't use
    container: false, // If you're using a different container solution
    gradientColorStops: false, // If you don't need gradient color stops
    // accessibility: false, // Be cautious disabling accessibility features!
  },
  // ... other configurations
}

            

              
                Copy
              
            
          

            // tailwind.config.js

module.exports = {
  theme: {
    extend: {
      // ... other theme extensions
    }
  },
  variants: {
    extend: {
      backgroundColor: ['active', 'disabled'], // Add 'active' and 'disabled' variants
      textColor: ['visited', 'group-hover'], // Add 'visited' and 'group-hover' variants
      opacity: ['disabled'],
      cursor: ['disabled'],
      // Example: A custom variant for a specific interaction
      animation: ['motion-safe', 'motion-reduce', 'hover-pulse'],
    },
  },
  // ... other configurations
}

            

              
                Copy
              
            
          

            // tailwind.config.js

// Example plugin: Adds utilities for complex box shadows
const plugin = require('tailwindcss/plugin')

module.exports = {
  // ... theme and variants
  plugins: [
    plugin(function({ addUtilities, theme, variants }) {
      const newUtilities = {
        '.shadow-soft-lg': {
          'box-shadow': `0 0.5rem 1rem rgba(0, 0, 0, 0.15),
                         0 0.25rem 0.5rem rgba(0, 0, 0, 0.075)`
        },
        '.shadow-hard-sm': {
          'box-shadow': `0 0.125rem 0.25rem rgba(0, 0, 0, 0.075)`
        }
      }
      addUtilities(newUtilities, variants('boxShadow'))
    }),
    // Another example: Adding utilities for fluid typography
    plugin(function({ addUtilities, theme, variants }) {
      const fluidUtilities = Object.entries(theme('fontSize')).map(([key, value]) => {
        const fluidValue = `clamp(${value[0]}, ${value[1]}, ${value[2]})`;
        return {
          [`.text-fluid-${key}`]: { 'font-size': fluidValue },
        };
      });
      addUtilities(fluidUtilities);
    }),
    // Include other plugins here, e.g., require('@tailwindcss/forms'), require('@tailwindcss/typography')
  ],
  // ... other configurations
}

            

              
                Copy
              
            
          

            # Installation example
npm install @tailwindcss/forms @tailwindcss/typography

            

              
                Copy
              
            
          

            // tailwind.config.js

module.exports = {
  // ... other configurations
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/typography'),
    // ... your custom plugins
  ],
}

            

              
                Copy
              
            
          

            // tailwind.config.js

module.exports = {
  content: [
    "./src/**/*.{html,js,jsx,ts,tsx,vue}",
    "./components/**/*.{html,js,jsx,ts,tsx,vue}",
    // Add paths to other template files, e.g., for different frameworks or static site generators
    "./templates/**/*.html",
    "./views/**/*.ejs",
    // Ensure all relevant files across your project are included.
  ],
  // ... other configurations
}

            

              
                Copy
              
            
          

            // tailwind.config.js

module.exports = {
  theme: {
    screens: {
      'sm': '640px',
      'md': '768px',
      'lg': '1024px',
      'xl': '1280px',
      '2xl': '1536px',
      'tablet-only': { 'min': '640px', 'max': '1023px' }, // Styles for tablets specifically
      'desktop-lg': { 'min': '1280px' },            // Styles for large desktops and up
    },
    extend: {
      // ...
    }
  },
  // ... other configurations
}

            

              
                Copy
              
            
          

            // tailwind.config.js

module.exports = {
  theme: {
    extend: {
      fontSize: {
        'fluid-base': ['1rem', '1.5'], // min, preferred, max - simplified for example
        'fluid-lg': ['1.25rem', '1.6'],
        'fluid-xl': ['1.5rem', '1.7'],
      },
      spacing: {
        'fluid-sm': ['0.5rem', '1rem'],
        'fluid-md': ['1rem', '2rem'],
      }
    }
  },
  // ... other configurations
}

// In your CSS or component:
// @responsive {
//   .text-fluid-base { font-size: clamp(1rem, 1.25vw + 0.75rem, 1.5rem); line-height: 1.5; }
//   .p-fluid-md { padding: clamp(1rem, 1.25vw + 0.75rem, 2rem); }
// }

// Note: Tailwind's JIT engine can automatically generate clamp utilities if configured correctly.
// You might need a plugin or custom configuration to fully automate clamp generation.
// Refer to Tailwind's documentation for the most up-to-date methods.

            

              
                Copy
              
            
          

            // tailwind.config.js

module.exports = {
  // ... other configurations
  
  // Enable RTL support
  variants: {
    extend: {
      margin: ['rtl', 'ltr'],
      padding: ['rtl', 'ltr'],
      borderWidth: ['rtl', 'ltr'],
      textAlign: ['rtl', 'ltr'],
      float: ['rtl', 'ltr'],
      // Add other relevant properties as needed
    },
  },
  plugins: [
    require('tailwindcss-rtl'), // A popular community plugin for easier RTL management
    // ... other plugins
  ],
}

            

              
                Copy
              
            
          

            
<!-- Default LTR -->
<div class="ml-4">...</div>

<!-- RTL -->
<html dir="rtl">
  <div class="mr-4">...</div> <!-- The margin is now on the right in RTL context -->
  <div class="ml-4">...</div> <!-- This will apply left margin in RTL context -->
</html>

            

              
                Copy
              
            
          

            // tailwind.config.js

module.exports = {
  // ... other configurations
  prefix: 'tw-',
  // ...
}

            

              
                Copy
              
            
          

            // tailwind.config.js

module.exports = {
  // ... other configurations
  important: true, // Makes all Tailwind utilities !important
  // Or target a specific selector
  // important: '#app', 
  // ...
}

            

              
                Copy
              
            
          

            
/* styles.css */
:root {
  --color-primary: #3490dc;
  --color-secondary: #6574cd;
  --spacing-unit: 0.5rem;
}

[data-theme='dark'] {
  --color-primary: #90cdf4;
  --color-secondary: #9f7aea;
}

            

              
                Copy
              
            
          

            // tailwind.config.js

module.exports = {
  theme: {
    extend: {
      colors: {
        'primary': 'var(--color-primary)',
        'secondary': 'var(--color-secondary)',
      },
      spacing: {
        'custom-unit': 'var(--spacing-unit)',
      }
    }
  },
  // ... other configurations
}

            

              
                Copy
              
            
          

            // tailwind.config.js (for Tailwind v2.x)

module.exports = {
  // ... theme configuration
  purge: {
    enabled: process.env.NODE_ENV === 'production', // Only purge in production
    content: [
      './src/**/*.{html,js,jsx,ts,tsx,vue}',
      // ... other paths
    ],
    // Options for safelisting classes that should never be purged
    safelist: [
      'bg-red-500', 
      'text-white',
      'md:flex',
      'lg:hidden',
      // Add dynamically generated classes or classes used in content management systems
      'prose',
      'dark:bg-gray-800',
    ],
  },
  // ... other configurations
}

            

              
                Copy